/**
*@description 普通雷达图
*@author yhw
*/
import React, { Component, PropTypes } from 'react';
import { connect } from 'dva';
import ReactEcharts from 'echarts-for-react';
import toExcel from '../../utils/toExcel';
import downImg from '../../utils/downImg';

const PieSimple = ({width, height, data, seriesName, loading, dispatch }) => {
     if(!data || !data.value || (data.value && data.value.length<=0)){return (<div className="emptyData">暂无数据</div>)}
      let option = {
            // tooltip: {
            //     trigger: 'axis'
            // },
            /*toolbox: {
                show: true,
                // itemSize:25,
                // iconStyle:{
                //     normal:{
                //         borderColor:'#bdbdbd'
                //     }
                // },
                right:20,
                feature: {
                    //restore: {},
                    saveAsImage: {backgroundColor:'#000000',icon : 'image://../sources/download.png?t=004', iconStyle:{emphasis:{borderColor:"#fff"}}}
                }
            },*/
            legend: {
                orient: 'vertical',
                left:'left',
                bottom: 'bottom',
                textStyle:{color:"#d5d5d5"},
                itemWidth:20,
                padding:[0, 0, 10, 50],
                data: data && data.legend || []
            },
            radar: [
                {
                    indicator: data && data.indicator || [{text: '', max: 100}],
                    //center: ['25%','40%'],
                    radius: 80
                }
            ],
            series : [
                {
                    type: 'radar',
                    /*tooltip: {
                        trigger: 'item'
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'top',
                            textStyle:{
                                color:'#888',
                                fontWeight:'bold',
                                fontSize:15
                            },
                            formatter:function(arg){
                                return (parseInt(arg.value).formatMoney())
                            }
                        }
                    },*/
                    itemStyle: {normal: {areaStyle: {type: 'default'}}},
                    data: [
                        {
                            value: data && data.value || [],
                            name: seriesName
                        }
                    ]
                }
            ]
        };
    let timeId = 'bar'+new Date().getTime(), exExcel = function(){
        let title=[], value = [];
        data.indicator.map(function(item, index){
            title.push(item.text);
        });
        data.value.map(function(item, index){
            value.push([item]);
        });
        toExcel(title, seriesName, value);
    };
      return (
        <div>
        <div className="downloads">
                <span className="dimg" onClick={downImg.bind(this,timeId,seriesName)}></span>
                <span className="desl" onClick={exExcel.bind(this)}></span>
          </div>
          <div id={timeId}><ReactEcharts
                option={option} 
                style={{width:width, height: height}}
                theme={"theme_name"} 
                showLoading={loading} /></div>
        </div>
      );
};

PieSimple.propTypes = {
    width:PropTypes.string.isRequired,
    height:PropTypes.number.isRequired,
    loading:PropTypes.bool,
    seriesName:PropTypes.string,
    data: PropTypes.object
};

export default connect()(PieSimple);